<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 200px;
            background-color: green;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="div1"><span>div1</span></div>
<div id="div2"><span>div1</span></div>
<div id="div3">
    <span>div1</span>
    <span>div2</span>
</div>
<script>
    let div1 = document.querySelector("#div1");
    let span1 = document.createElement("span");
    span1.textContent = "span1";
    div1.insertBefore(span1, null);
    let span2 = document.createElement("span");
    span2.textContent = "span2";
    div1.insertBefore(span2, span1);
    let span3 = document.createElement("span");
    span3.textContent = "span3";
    div1.prepend(span3);
    let span4 = document.createElement("span");
    span4.textContent = "span4";
    div1.after(span4);

    let div2 = document.querySelector("#div2");
    //"beforebegin" | "afterbegin" | "beforeend" | "afterend";
    /*
        beforebegin：兄弟节点，顶部或左边
        afterend：兄弟节点，底部或右边
        afterbegin：子节点，顶部或左边
        beforeend：子节点，底部或右边
     */
    // div2.insertAdjacentElement("beforebegin", span1);
    div2.insertAdjacentElement("afterbegin", span1);
    // div2.insertAdjacentElement("beforeend", span1);
    // div2.insertAdjacentElement("afterend", span1);

    div2.insertAdjacentHTML("beforebegin", "<span>span5</span>");
    div2.insertAdjacentText("afterend", "<span>span5</span>");

    //替换元素
    div2.replaceChild(span4, span1);
    div2.replaceWith(span3, span4);

    let div3 = document.querySelector("#div3");
    console.log(div3.childNodes);
    let text = document.createTextNode("haha");
    div3.prepend(text);
    console.log(div3.childNodes);
    div3.normalize();
    console.log(div3.childNodes);
    let clone = div1.childNodes[1].cloneNode(true);
    div3.append(clone);
    console.log(div3.childNodes);
</script>
</body>
</html>